<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="header::head-fragment('帖子详情')">
</head>

<body>
    <div th:replace="header::header-fragment"></div>

    <div class="fly-panel fly-column">
        <div class="layui-container">
            <!-- 1.渲染页面顶部的帖子分类信息 -->
            <a id="homeList" href="/">首页</a>
            <button style="display: none;" id="toggleList">话题列表 <i class="layui-icon layui-icon-down layui-font-12"></i> </button>
            <div style="display: none;" id="listContainer" class="layui-menu layui-dropdown-menu">
                <!-- <li th:class="${null ==categoryId} ?'layui-hide-xs layui-this':''"></li> -->
                <th:block th:unless="${null == bbsPostCategories}">
                    <th:block th:each="c : ${bbsPostCategories}">
                        <li th:class="${null !=categoryId and categoryId==c.categoryId} ?'layui-hide-xs layui-this':''">
                            <a th:href="@{${'/index?categoryId='+c.categoryId}}" th:text="${c.categoryName}">分享</a>
                        </li>
                    </th:block>
                </th:block>
                <!-- <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li> -->

            </div>
            <style>
                #homeList,
                #toggleList {
                    display: inline-block;
                    vertical-align: middle;
                    height: 38px;
                    line-height: 38px;
                    border: 1px solid transparent;
                    padding: 0 18px;
                    background-color: #16baaa;
                    color: #fff;
                    white-space: nowrap;
                    text-align: center;
                    font-size: 14px;
                    border-radius: 2px;
                }

                #toggleList {
                    margin-left: 10px;
                    border-color: #d2d2d2 !important;
                    background: #fff !important;
                    color: #333;
                }

                #listContainer {
                    position: absolute;
                    z-index: 1;
                    display: none;
                    /* 默认隐藏列表 */
                    /* 其他样式 */
                    border-width: 1px;
                    border-style: solid;
                    border-color: #eee;
                    left: 80px;
                    top: 40px;
                }

                #listContainer li {}

                #listContainer.show {
                    display: block;
                    /* 显示列表 */
                }
            </style>
            <!-- <ul class="layui-clear">
                <li th:class="${null ==categoryId} ?'layui-hide-xs layui-this':''"><a href="/">首页</a></li>
                <th:block th:unless="${null == bbsPostCategories}">
                    <th:block th:each="c : ${bbsPostCategories}">
                        <li th:class="${null !=categoryId and categoryId==c.categoryId} ?'layui-hide-xs layui-this':''">
                            <a th:href="@{${'/index?categoryId='+c.categoryId}}" th:text="${c.categoryName}">分享</a>
                        </li>
                    </th:block>
                </th:block>

                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>
            </ul> -->

            <div class="fly-column-right layui-hide-xs">
                <a th:href="@{/addPostPage}" class="layui-btn">发布新帖</a>
            </div>
        </div>
    </div>

    <div class="layui-container">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8 content detail">
                <div class="fly-panel detail-box">
                    <h1 th:text="${bbsPost.postTitle}">My-BBs开源啦</h1>
                    <div class="fly-detail-info">
                        <div>
                            <a class="layui-btn layui-btn-xs jie-admin"
                                th:href="@{'/editPostPage/'+${bbsPost.postId}}">编辑</a>
                        </div>
                        <span class="fly-list-nums">
                            <a href="#comments"><i class="iconfont" title="评论">&#xe60c;</i>
                                <th:block th:text="${bbsPost.postComments}"></th:block>
                            </a>
                            <i class="iconfont" title="人气">&#xe60b;</i>
                            <th:block th:text="${bbsPost.postViews}"></th:block>
                        </span>
                    </div>
                    <div class="detail-about">
                        <a class="fly-avatar" th:href="@{${'/userCenter/'+bbsUser.userId}}">
                            <img th:src="@{${bbsUser.headImgUrl}}">
                        </a>
                        <div class="fly-detail-user">
                            <a th:href="@{${'/userCenter/'+bbsUser.userId}}" class="fly-link">
                                <cite th:text="${bbsUser.nickName}">程序员十三</cite>
                                <span>
                                    <th:block th:if="${bbsUser.userStatus==0}">账号正常
                                    </th:block>
                                    <th:block th:if="${bbsUser.userStatus==1}">账号已被封
                                    </th:block>
                                </span>
                            </a>
                        </div>
                        <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
                            <span th:text="${#dates.format(bbsPost.createTime, 'yyyy-MM-dd')}">2021-08-01</span>
                            <span style="margin-left: 6px; padding-right: 10px; color: #FF7200"
                                th:text="${'最新修改时间：'+#dates.format(bbsPost.lastUpdateTime, 'yyyy-MM-dd HH:mm:ss')}">2021-08-01</span>
                        </div>
                    </div>
                    <div class="detail-body photos" th:utext="${bbsPost.postContent}">
                    </div>
                    <div style="text-align: center;">
                        <th:block th:unless="${currentUserCollectFlag}">
                            <a href="##" th:onclick="'collect('+${bbsPost.postId}+')'">
                                <span style="color: red;">
                                    <i class="iconfont icon-zan"></i>
                                    收藏&nbsp;&nbsp;(<th:block th:text="${bbsPost.postCollects}"></th:block>)
                                </span>
                            </a>
                        </th:block>
                        <th:block th:if="${currentUserCollectFlag}">
                            <a href="##" th:onclick="'delCollect('+${bbsPost.postId}+')'">
                                <span style="color: grey;">
                                    <i class="iconfont icon-zan"></i>
                                    取消收藏&nbsp;&nbsp;(<th:block th:text="${bbsPost.postCollects}"></th:block>)
                                </span>
                            </a>
                        </th:block>
                    </div>
                </div>

                <div class="fly-panel detail-box" id="comments">
                    <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                        <legend>回帖</legend>
                    </fieldset>

                    <ul class="jieda" id="jieda">
                        <th:block th:if="${#lists.isEmpty(commentsPage.list)}">
                            <!-- 无数据时 -->
                            <li class="fly-none">消灭零回复</li>
                        </th:block>
                        <th:block th:unless="${#lists.isEmpty(commentsPage.list)}">
                            <th:block th:each="bbsCommentListEntity : ${commentsPage.list}">
                                <li data-id="111">
                                    <a name="item-1111111111"></a>
                                    <div class="detail-about detail-about-reply">
                                        <a class="fly-avatar"
                                            th:href="@{${'/userCenter/'+bbsCommentListEntity.commentUserId}}">
                                            <img th:src="@{${bbsCommentListEntity.headImgUrl}}"
                                                th:alt="${bbsCommentListEntity.nickName}">
                                        </a>
                                        <div class="fly-detail-user">
                                            <a th:href="@{${'/userCenter/'+bbsCommentListEntity.commentUserId}}"
                                                class="fly-link">
                                                <cite th:text="${bbsCommentListEntity.nickName}">程序员十三</cite>
                                            </a>
                                        </div>
                                        <div class="detail-hits">
                                            <span
                                                th:text="${#dates.format(bbsCommentListEntity.commentCreateTime, 'yyyy-MM-dd HH:mm:ss')}">2021-08-01</span>
                                        </div>
                                    </div>
                                    <div class="detail-body jieda-body photos">
                                        <p th:text="${bbsCommentListEntity.commentBody}">回复内容</p>
                                    </div>
                                    <div class="jieda-reply">
                                        <a href="#replyTextarea"
                                            th:onclick="'preReply('+${bbsCommentListEntity.commentUserId}+')'">
                                            <span type="reply">
                                                <i class="iconfont icon-svgmoban53"></i>
                                                回复
                                            </span>
                                        </a>
                                        <div class="jieda-admin">
                                            <span type="del"
                                                th:onclick="'delReply('+${bbsCommentListEntity.commentId}+')'">删除</span>
                                        </div>
                                    </div>
                                </li>
                            </th:block>
                        </th:block>
                    </ul>
                    <th:block th:unless="${#lists.isEmpty(commentsPage.list)}">
                        <!-- 有数据时才会显示分页按钮 -->
                        <div style="text-align: center">
                            <div class="laypage-main">
                                <th:block th:if="${commentsPage.currPage>1}">
                                    <a class="laypage-prev"
                                        th:href="@{'/detail/'+${bbsPost.postId}+'?commentPage=' + ${commentsPage.currPage-1}+'#comments'}">
                                        &lt;&lt;</a>
                                </th:block>
                                <th:block th:if="${commentsPage.currPage==1}">
                                    <a class="laypage-prev" href="##">
                                        &lt;&lt;</a>
                                </th:block>
                                <th:block th:if="${commentsPage.currPage-2 >=1}">
                                    <a class="laypage-prev"
                                        th:href="@{'/detail/'+${bbsPost.postId}+'?commentPage=' + ${commentsPage.currPage-2}+'#comments'}"
                                        th:text="${commentsPage.currPage - 2}">1</a>
                                </th:block>
                                <th:block th:if="${commentsPage.currPage-1 >=1}">
                                    <a class="laypage-prev"
                                        th:href="@{'/detail/'+${bbsPost.postId}+'?commentPage=' + ${commentsPage.currPage-1}+'#comments'}"
                                        th:text="${commentsPage.currPage - 1}">1</a>
                                </th:block>
                                <a href="##" class="laypage-curr" th:text="${commentsPage.currPage}">1</a>
                                <th:block th:if="${commentsPage.currPage+1<=commentsPage.totalPage}">
                                    <a class="laypage-next"
                                        th:href="@{'/detail/'+${bbsPost.postId}+'?commentPage=' + ${commentsPage.currPage+1}+'#comments'}"
                                        th:text="${commentsPage.currPage + 1}">1</a>
                                </th:block>
                                <th:block th:if="${commentsPage.currPage+2<=commentsPage.totalPage}">
                                    <a class="laypage-next"
                                        th:href="@{'/detail/'+${bbsPost.postId}+'?commentPage=' + ${commentsPage.currPage+2}+'#comments'}"
                                        th:text="${commentsPage.currPage + 2}">1</a>
                                </th:block>
                                <th:block th:if="${commentsPage.currPage<commentsPage.totalPage}">
                                    <a class="laypage-next"
                                        th:href="@{'/detail/'+${bbsPost.postId}+'?commentPage=' + ${commentsPage.currPage+1}+'#comments'}">
                                        &gt;&gt;</a>
                                </th:block>
                                <th:block th:if="${commentsPage.currPage==commentsPage.totalPage}">
                                    <a class="laypage-next" href="##">
                                        &gt;&gt;</a>
                                </th:block>
                            </div>
                        </div>
                    </th:block>

                    <div class="layui-form layui-form-pane" id="replyTextarea">
                        <form method="post" id="replyForm" onsubmit="return false;" action="##">
                            <input type="hidden" id="postId" name="postId" th:value="${bbsPost.postId}">
                            <input type="hidden" id="parentCommentUserId" name="parentCommentUserId" value="0">
                            <div class="layui-form-item layui-form-text">
                                <div class="layui-input-block">
                                    <textarea id="commentBody" name="commentBody" required lay-verify="required"
                                        placeholder="请输入内容" class="layui-textarea fly-editor"
                                        style="height: 150px;"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="verifyCode" class="layui-form-label">验证码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="verifyCode" name="verifyCode" required lay-verify="required"
                                        placeholder="请输入验证码" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">
                                    <span><img data-tooltip="看不清楚？换一张" th:src="@{/common/captcha}"
                                            onclick="this.src='/common/captcha?d='+new Date()*1" alt="单击图片刷新！"></span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <input type="hidden" name="jid" value="123">
                                <button class="layui-btn" lay-filter="*" lay-submit onclick="reply()">提交回复</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <dl class="fly-panel fly-list-one">
                    <dt class="fly-panel-title">本周热议</dt>
                    <th:block th:if="${#lists.isEmpty(hotTopicBBSPostList)}">
                        <!-- 无数据时 -->
                        <div class="fly-none">没有相关数据</div>
                    </th:block>
                    <th:block th:unless="${#lists.isEmpty(hotTopicBBSPostList)}">
                        <th:block th:each="bbsEntity : ${hotTopicBBSPostList}">
                            <dd>
                                <a th:href="@{'/detail/'+${bbsEntity.postId}}"
                                    th:text="${bbsEntity.postTitle}">My-BBS开源啦</a>
                                <span><i class="iconfont icon-pinglun1"></i>
                                    <th:block th:text="${bbsEntity.postComments}"></th:block>
                                </span>
                            </dd>
                        </th:block>
                    </th:block>
                </dl>

                <div class="fly-panel" style="display: none;">
                    <div class="fly-panel-title">
                        我的公众号
                    </div>
                    <div class="fly-panel-main">
                        <a href="https://juejin.im/user/59199e22a22b9d0058279886" target="_blank">
                            <img style="max-width: 100%;" th:src="@{/images/my-gzh-qrcode.jpg}">
                        </a>
                    </div>
                </div>

                <div class="fly-panel" style="display: none;">
                    <div class="fly-panel-title">
                        我的新书
                    </div>
                    <div class="fly-panel-main">
                        <a href="https://item.jd.com/12890115.html" target="_blank">
                            <img style="max-width: 100%;" th:src="@{/images/my-book01.png}">
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="footer-container"></div>
    <!-- <div class="fly-footer">
    <p>My-BBS社区 2021 &copy; <a href="https://github.com/ZHENFENG13/My-BBS" target="_blank">十三</a></p>
</div> -->

    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/public.js}"></script>

    <script type="text/javascript">
        layui.use(['layer', 'element', 'jquery'], function () {
            var layer = layui.layer, $ = layui.$, element = layui.element;
            var device = layui.device();
            //阻止IE7以下访问
            if (device.ie && device.ie < 8) {
                layer.alert('您的浏览器版本过低，请使用微软Edge，谷歌Chrome或者360浏览器访问以体验更佳效果。');
            }

            //回复按钮的触发事件
            window.preReply = function (parentCommentUserId) {
                $('#parentCommentUserId').val(parentCommentUserId);
            }

            //评论
            window.reply = function (postId) {
                var $ = layui.$;
                var verifyCode = $("#verifyCode").val().toLowerCase();
                if (!validLength(verifyCode, 5)) {
                    layer.alert('请输入正确的验证码!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var commentBody = $("#commentBody").val();
                if (isNull(commentBody)) {
                    layer.alert('请输入评论!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var params = $("#replyForm").serialize();
                var url = '/replyPost';
                $.ajax({
                    type: 'POST',//方法类型
                    url: url,
                    data: params,
                    success: function (result) {
                        if (result.resultCode == 200) {
                            layer.confirm('评论成功!将刷新本页面...', {
                                icon: 3,
                                skin: 'layui-layer-molv',
                                title: '提示'
                            }, function (index) {
                                layer.close(index);
                                window.location.reload();
                            });
                        } else {
                            layer.msg(result.message);
                        }
                        ;
                    },
                    error: function () {
                        layer.alert('操作失败!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    }
                });
            }

            //删除评论
            window.delReply = function (commentId) {
                var $ = layui.$;
                $.ajax({
                    type: 'POST',//方法类型
                    url: '/delReply/' + commentId,
                    success: function (result) {
                        if (result.resultCode == 200) {
                            layer.confirm('删除成功!将刷新本页面...', {
                                icon: 3,
                                skin: 'layui-layer-molv',
                                title: '提示'
                            }, function (index) {
                                layer.close(index);
                                window.location.reload();
                            });
                        } else {
                            layer.msg(result.message);
                        }
                        ;
                    },
                    error: function () {
                        layer.alert('操作失败!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    }
                });
            }

            //收藏
            window.collect = function (postId) {
                var $ = layui.$;
                $.ajax({
                    type: 'POST',//方法类型
                    url: '/addCollect/' + postId,
                    success: function (result) {
                        if (result.resultCode == 200) {
                            layer.confirm('收藏成功!将刷新本页面...', {
                                icon: 3,
                                skin: 'layui-layer-molv',
                                title: '提示'
                            }, function (index) {
                                layer.close(index);
                                window.location.reload();
                            });
                        } else {
                            layer.msg(result.message);
                        }
                        ;
                    },
                    error: function () {
                        layer.alert('操作失败!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    }
                });
            }

            //取消收藏
            window.delCollect = function (postId) {
                var $ = layui.$;
                $.ajax({
                    type: 'POST',//方法类型
                    url: '/delCollect/' + postId,
                    success: function (result) {
                        if (result.resultCode == 200) {
                            layer.confirm('取消收藏成功!将刷新本页面...', {
                                icon: 3,
                                skin: 'layui-layer-molv',
                                title: '提示'
                            }, function (index) {
                                layer.close(index);
                                window.location.reload();
                            });
                        } else {
                            layer.msg(result.message);
                        }
                        ;
                    },
                    error: function () {
                        layer.alert('操作失败!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    }
                });
            }
            // 我的jquery代码
            $(function () {
                $("#footer-container").load("../html/footer.html");

                // 控制列表展开
                $('#toggleList').click(function () {
                    $('#listContainer').toggleClass('show');
                });
            });
        });


    </script>
</body>

</html>